<template>
	<view>
		<u-tabs class="navsTop " :list="list" active-color="#1BBF80" :is-scroll="false" font-size="32" :current="current" @change="change"></u-tabs>
		<view v-show="current == 0 " class="navsTab ">
			<view  @tap="navTabs(v,i)" :class="{acts:currents == i}" v-for="(v,i) in list[0].nav" :key="i">
				{{v.name}}
			</view>
		</view>
		<view v-if="orderList != '' " :class="{ sellBox:current !== 0}" class="sellBoxs main p30"> 
			<view class="list " v-for="(item,index) in orderList" :key="index" @click="toDetail(item.id)">
				<view class="lists p30">
					<view class="title ">
						订单号：
						{{item.sn}}
						<view class="fr c2" v-if="item.status == 'RESERVED'">已预定</view>
						<view class="fr c2" v-if="item.status == 'ORDER_TAKING'">等待派送</view>
						<view class="fr c2" v-if="item.status == 'DELIVERY'">派送中</view>
						<view class="fr c2" v-if="item.status == 'SELF_PICK_UP'">等待自取</view>
						<view class="fr c2" v-if="item.status == 'COMPLETED'">已完成</view>
						<view class="fr c2" v-if="item.status == 'CANCELLED'">交易取消</view>
					</view>
					<view class="main ">
						<view class="box " v-for="(cItem,cIndex) in item.orderItems" :key="cIndex">
							<image class="shop" :src="cItem.image" mode="aspectFit"></image>
							<view class="txt">
								<p class="p1  one">
									{{cItem.name}}
								</p>
								<p class="p2 text-xs one">
									收藏 {{cItem.productInfo.favoriteQuantity}}
									&nbsp; &nbsp;
									已购 {{cItem.productInfo.sales}}
								</p>
								<p class="p3 text-lg one"><text style="font-size: 24rpx;">¥</text> {{cItem.price}} <span style="font-size: 24rpx;">× {{cItem.quantity}}</span></p>
							</view>
						</view>
						<view class="bottom "> 
							<p >共{{item.orderItems.length}}件商品   合计：  ¥<span class="sum"> {{item.price}}</span> </p>
							<p class="btns" v-if="item.status != 'COMPLETED' && item.status != 'CANCELLED'">
								<u-button :ripple="true" shape="circle" class="remves" type="success" :plain="true"
									v-if="item.status == 'RESERVED'"
									@click="updateStatus(item.id,'ORDER_TAKING')"
								>确认接单</u-button>
								<u-button :ripple="true" shape="circle" class="remves" type="success" :plain="true"
									v-if="item.status == 'ORDER_TAKING'"
									@click="updateStatus(item.id,'DELIVERY')"
								>确认配送</u-button>
								<u-button :ripple="true" shape="circle" class="remves" type="success" :plain="true"
									v-if="item.status == 'DELIVERY'"
									@click="updateStatus(item.id,'DELIVERED')"
								>确认送达</u-button>
								<u-button :ripple="true" shape="circle" :plain="true" type="success" class="remves"
									v-if="item.status == 'SELF_PICK_UP'"
									@click="updateStatus(item.id,'COMPLETED')"
								>自取完成</u-button> 
								<!-- <u-button :ripple="true" shape="circle" class="remves"
									v-if="item.status == 'RESERVED' || item.status == 'ORDER_TAKING' || item.status == 'SELF_PICK_UP'" 
									@click="updateStatus(item.id,'CANCELLED')"
								>取消交易</u-button> --> 
							</p>
							<p v-if="item.status == 'COMPLETED' && item.isReply ==false" class="btns">
								<u-button :ripple="true" shape="circle" :plain="true" type="success" class="remves"
									v-if="item.status == 'COMPLETED'"
									@click="go('../CreateComment/CreateComment?id='+item.id)"
								>回复一下</u-button>
							</p>
						</view>
					</view>
				</view>
			</view>
			<uni-load-more :contentText="loadText" :status="loadStatus"></uni-load-more>
		</view> 
		<view v-if="orderList == '' " class=" dataNone">
			<image src="../../static/image/shangpin@2x.png" mode=""></image>
			<p>还没卖出商品呦 ~ </p>
		</view>
	</view>
</template>

<script>
	import {nav} from './index.js'
	export default {
		data() {
			return {
				list:nav,
				current: 0,
				currents:0, 
				state:'',
				pageNumber: 0,
				pageSize: 10,
				orderList: [], 
				loadStatus: 'noMore',
				loadText: {
					contentdown: "上拉显示更多",
					contentrefresh: "正在加载...",
					contentnomore: "没有更多数据了"
				}
			}
		},
		onLoad(e) {
			if(e.state=='RESERVED'){
				this.state = e.state
				uni.setNavigationBarTitle({
					title:'已预订的'
				})
			} 
			if(e.state=='isSell'){ 
				uni.setNavigationBarTitle({
					title:'订单管理'
				})
			} 
			// 向宿主App发送事件
			uni.sendNativeEvent('infoUser', {
				msg: 'unimp message!!!'
			}, ret => {
				ret = JSON.parse(ret)
				let token = ret.token;
				uni.setStorageSync('token', token)
			})
			this.state = this.list[0].state
		},
		onShow() { 
			this.inits()
		},
		methods: {
			navTabs(v,i){
				this.currents = i
				this.state = v.state 
				this.inits()
			},
			inits(){
				this.pageNumber = 0;
				this.orderList = [];
				this.getList();
			},
			change(index){
				this.current = index
				this.state = this.list[index].state
				this.inits()
			},
			go(url){
				this.$navigateTo(url)
			},
			getList() {
				this.loadStatus = 'loading';
				var params = {
					isCreator: false
				};
				
				if(this.state){
					params.status = this.state
				}
				
				params.pageable = {
					pageNumber: ++this.pageNumber,
					pageSize: this.pageSize
				};
				this.$common.ajax.postAjax({
					url: this.$common.url.api.orderList,
					data: params,
					success: res => {
						var result = res.data;
						if (result.code == 0) {
							this.orderList = this.orderList.concat(result.data.content);
						} else {
							this.$common.msg(result.msg);
						}
						if (this.pageNumber == result.data.totalPages || result.data.totalPages == 0) {
							this.loadStatus = 'noMore';
						} else {
							this.loadStatus = 'more';
						}
					},
					fail: e => {
						this.$common.msg("网络不佳~~")
					}
				})
			},
			updateStatus(id, status) {
				var params = {
					id: id,
					status: status
				}
				this.$common.ajax.postAjax({
					url: this.$common.url.api.businessUpdateStatus,
					data: params,
					success: res => {
						var result = res.data;
						if (result.code == 0) {
							this.pageNumber = 0;
							this.orderList = [];
							this.getList();
						} else {
							this.$common.msg(result.msg);
						}
					},
					fail: e => {
						this.$common.msg("网络不佳~~")
					}
				})
			},
			toDetail(id) {
				var url = `../OrderDetails/OrderDetails?id=${id}&isSeller=true`;
				this.$common.navigateTo(url);
			}
		},
		onReachBottom() {
			if (this.loadStatus == 'more') {
				this.getList();
			}
		}
	}
</script>

<style lang="less" scoped>
	@import '../../static/initLess/BuyPublic.less';
	@import './index.less';
</style>
